<template>
    <div>
        <div class="news">
            <router-link
                :to="{ path: '/zypx/dec', query: { id: item.id } }"
                v-for="(item, index) in newsList"
                :key="index"
            >
                <img :src="prefixUrl + item.coverImageUrl" alt="无法显示" />
                <span>
                    <h1>{{ item.title }}</h1>
                    <p>{{ item.brief }}</p>
                    <p>{{ item.createTime | pattime }}</p>
                </span>
            </router-link>
        </div>
        <!-- <div class="news-page">
            <el-pagination
                background
                layout="prev, pager, next"
                :total="totalSum"
                :page-size="sizeSum"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            ></el-pagination>
        </div> -->
    </div>
</template>

<script>
export default {
    data() {
        return {
            newsList: [],
            totalSum: 3,
            sizeSum: 10,
            prefixUrl: "",
        };
    },
    filters: {
        pattime(value) {
            return value.slice(0, 10);
        },
    },
    props: {
        zxList: {
            type: Array,
        },
    },
    watch: {
        zxList: {
            handler(val, oldVal) {
                console.log(val);
                this.newsList = [...val];
            },
            deep: true,
        },
    },
    created() {
        this.prefixUrl = this.$store.state.user.imgUrl;
        this.getIndustryInfo(1);
    },
    methods: {
        async getIndustryInfo(val) {
            var data = { currentPage: val, pageSize: 10, menuType: "1" };
            const res = await this.$store.dispatch("news/getTrainList", data);
            this.newsList = res.list;
            this.totalSum = res.totalCount;
            console.log(res);
        },
        // handleSizeChange(val) {
        //     console.log(`每页 ${val} 条`);
        // },
        // handleCurrentChange(val) {
        //     this.getIndustryInfo(val)
        // }
    },
};
</script>

<style scoped>
.news {
    padding: 20px 0;
}
.news a {
    display: flex;
    padding-right: 15px;
    margin-bottom: 10px;
}
.news a img {
    width: 140px;
    height: 100px;
    display: block;
    object-fit: cover;
}
.news a span {
    display: block;
    margin-left: 20px;
    flex: 1;
}
.news a span h1 {
    font-size: 17px;
    padding-bottom: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 685px;
}
.news a span p {
    font-size: 14px;
    color: #666;
    line-height: 23px;
    padding-bottom: 5px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.news-page {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
}

/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
    background: #c02636;
}
</style>
